/**
 * VUEshop
 * ============================================================================
 * * 版权所有 2015-2027 深圳搜豹网络科技有限公司，并保留所有权利。
 * 网站地址: http://www.vueshop.com.cn
 * ----------------------------------------------------------------------------
 * 这不是一个自由软件！您只能在不用于商业目的的前提下对程序代码进行修改和使用 .
 * 不允许对程序代码以任何形式任何目的的再发布。
 * ============================================================================
 * $Author: 沈小白 2020-07-22 $
 */<template> 
	<view v-if="goodslist">
		<view class="container">
			<view class="search-bar">
				<form @submit="submitSearch">
					<input class="search-input" @input="searchName" name="word" placeholder="输入商品名称">

					</input>
					<button class="search-btn" form-type="submit" role="button" aria-disabled="false">
						<image class="wh100 search-img" :src="imgUrl+'common/sea.png'" role="img"></image>

					</button>
				</form>
			</view>
			<view class="nav">
				<navigator @tap="changeTab" class="nav-item " :class="[active==1?'red':'']" data-type="1" data-order="" role="navigation">综合</navigator>
				<navigator @tap="changeTab" class="nav-item" :class="[active==2?'red':'']" data-type="2" data-order="is_new" role="navigation">新品</navigator>
				<navigator @tap="changeTab" class="nav-item" :class="[active==3?'red':'']" data-type="3" data-order="sales_sum" role="navigation">销量</navigator>
				<navigator @tap="changeTab" class="nav-item" :class="[active==4?'red':'']" data-type="4" data-order="shop_price" role="navigation">
					佣金
					<view class="ico-dir" :class="[params.order_by=='shop_price'?(priceFlag?'ico-dir-up':'ico-dir-dn'):'']" :style="'background-image:url('+szjxImg+')'"></view>
				</navigator>
				<navigator @tap="openFilterModal" class="nav-item" role="navigation">
					筛选
					<view class="ico-filter">
						<image class="wh100" :src="imgUrl+'common/xx.png'" role="img"></image>
					</view>
				</navigator>
			</view>
			<view class="disgoods-list">
				<block v-for="(item,index) in goodslist" :key="index">
					<view class="choice_item">
						<view class="goods-check">
							<checkbox @tap="selectGoods" :checked="item.selected" :data-index="index"  :data-id="item.goods_id" color="#ff3b3b" role="checkbox" aria-disabled="false" aria-checked="false"></checkbox>
						</view>
						<view class="img-wrap">
							<image @tap="goodsDetail" :data-id="item.goods_id" :src="hostUrl+'/mall/goods/thumb_image?goods_id='+ item.goods_id+'&width='+goodsImgWidth+'&height='+goodsImgHeight+'&'+item.goods_id+'.'+imgType"role="img"></image> </view> <view class="item-cont">
								<view @tap="goodsDetail" class="title" :data-id="item.goods_id">{{item.goods_name}}</view>
								<view class="price">分成金额：{{filter(item.distribut)}}</view>
								<view class="comment">￥{{filter(item.shop_price)}}</view>
						</view>
					</view>
				</block>
			</view>
			<view class="no-data" v-if="!goodslist || goodslist.length == 0">
				<image :src="imgUrl+'cart/cart-null.png'" class="cart-image"/>
				<view class="no-data-title">没有相关的数据</view>
			</view>
			<view class="distri-bot">
				<view class="bot-left">
					<checkbox @tap="checkAll" :checked="selectAll" class="check-all" color="#ff3b3b" role="checkbox" aria-disabled="false" aria-checked="false"></checkbox>
					<label>全选</label>
				</view>
				<view @tap="addGoods" class="bot-right">
					<button role="button" aria-disabled="false">
						添加

					</button>
				</view>
			</view>
		</view>
		<!-- 筛选弹框  -->
		<view>
		    <view class="cover-layer" @tap="closeFilterModal" :hidden='!openFilter'></view> 
		    <view class="filter-modal" :hidden='!openFilter'>
				<button @tap="restoreData"class="viewall-btn"role="button"aria-disabled="false">显示全部分类</button>
				<close-inco type="close" color="gray" size="22" class="modal-close" @click="closeFilterModal"></close-inco>
		        <view class='all-classification'>
		            <view class='allcla-btn' @tap='categoryTap'>全部分类</view>
		            <view :hidden='!categoryShow' class='claitem-box' >
		               <block v-for="(item,index) in categoryList" :key="index">
						    <view class='cla-item' @tap='checkCategory' :data-id='item.id'>{{item.name}}</view>
					   </block>
		            </view>
		        </view>
		        <view class='all-brand' :hidden='!brandShow'>
		            <view class='allbra-btn' @tap='brandTap'>全部品牌</view>
		            <view  class='braitem-box' >
		                <block v-for="(item,index) in brandList" :key="index">
							<view class='bra-item' @tap='checkBrand':data-id="item.id" >{{item.name}}</view>
						</block>
		            </view>
		        </view>
		    </view>
		</view>
	</view>
</template>

<script>
	import {getDistribution,getGoodsCategoryList,getBrandInfo,postUerDistribution,getUserStore} from "@/api/api.js";
	import config from "@/api/config.js";
	import closeInco from "@/components/uni-icons/uni-icons.vue";
	import common from "@/common/common.js";
	import {mapState} from "vuex";
	export default {
		data() {
			return {
				active:"1",
				hostUrl:config.host,//图片路径前缀
				imgUrl:config.imgUrl,
				priceFlag:false,//价格排序控制器
				goodslist:"",
				is_level1:"1",//分类默认传是第一级
				openFilter:false,//弹框控制器
				categoryShow:false,//分类控制器
				brandShow:false,//品牌控制器
				categoryList:"",//分类
				brandList:"",//品牌
				clickId:"",//被点击的分类id
				szjxImg:config.imgUrl+'common/sxjt.png',
				total:"",//数据条数
				storeInfo:"",//店铺信息
				order_by:"",//排序字段
				size:10,//默认数据10条
				goodsIds:[],//商品id
				selectAll:false,
				params:{
					order_by:"",
					asc:"",
				
					cat_id:"",
					brand_id:"",
					goods_name:"",
				},/*order_by:"",//排序字段 asc:"",:"",//排序方式 //true 升序 false降序//分销商品类型  false未添加 true已添加
							cat_id:"",//分类id
							size:"10",//默认10条*/
			};
		},
		computed: mapState(['hasLogin','imgType','goodsImgHeight','goodsImgWidth']),
		components:{
			closeInco
		},
		onLoad(){
			
			if(this.hasLogin){
				
				this.getDistribution(this.params)
				this.getGoodsCategoryList(this.is_level1)
				this.getUserStore()
			}else{
				common.islogin()
			}
			
		},
		methods:{
			/*分销商品*/ 
			getDistribution(params){
				getDistribution(params).then(res=>{
					console.log(res)
					if(res){
						res.records.forEach((i,index)=>{
							i.selected=false;
						})
						this.goodslist=res.records;
						this.total=res.total;
						this.size=res.size;
						this.selectAll=false;
						/*重置数组*/ 
						this.goodsIds.length=0;
					}
				})
				
			},
			/*分类方法*/ 
			getGoodsCategoryList(params){
				getGoodsCategoryList(params).then(res=>{
					console.log(res)
					if(res){
						this.categoryList=res;
					}
				})
			},
			/*品牌分类*/ 
			getBrandInfo(params){
				getBrandInfo(params).then(res=>{
					
					if(res.length>0){
						this.brandList=res;
						this.brandShow=true;
					}
					/*点击分类获取分类列表=>获取品牌列表?点击品牌更新数据：点击分类更新商品数据								*/
					if(res.length==0){
					  
						this.params.size=20;
					   this.params.cat_id=this.clickId;
					   this.getDistribution(this.params)
					   this.brandShow=false;
					   this.openFilter=false;
					}
					
					
					console.log(this.brandList)
				})
			},
			/*选择商品*/ 
			selectGoods(e){
				let goods_id=e.currentTarget.dataset.id;
				let index= e.currentTarget.dataset.index;
				this.goodslist[index].selected=!this.goodslist[index].selected;
				// console.log(goods_id)
				/*检查是否有勾选,没有就添加否则删除*/ 
				if(this.goodsIds.indexOf(goods_id)==-1){
					this.goodsIds.push(goods_id)
					
				}else{
					this.goodsIds.splice(this.goodsIds.indexOf(goods_id), 1)
				
				}
				/*长度是否相等  相等就是全选*/
				this.detection()
				console.log(this.goodsIds)
			},
			/*保留两位小数*/
			filter(e) {
				let num = parseFloat(e).toFixed(2)
				return num;
			},
			/*店铺信息*/
			getUserStore(){
				getUserStore().then(res=>{
					console.log(res)
					if(res){
						this.storeInfo=res;
					}
				})
			},
			/*全选*/ 
			checkAll(e){
				
				/*全选 查询数组有就添加*/ 
				if(!this.selectAll){
					this.selectAll=true;
					this.goodslist.forEach((i,index)=>{
						// console.log(i)
						i.selected=true;
						if(this.goodsIds.indexOf(JSON.stringify(i.goods_id))==-1){
							this.goodsIds.push(JSON.stringify(i.goods_id))
						}
					})
				}else{
					this.selectAll=false;
					this.goodslist.forEach((i,index)=>{
						// console.log(i)
						i.selected=false;
						
					})
					this.goodsIds.length=0;
				}
					
				
				
				console.log(this.goodsIds)
			},
			/*检测是否全选*/ 
			detection(){
				if(this.goodsIds.length==this.goodslist.length){
					// console.log("相等")
					this.selectAll=true;
					console.log(this.goodsIds.length,this.goodslist.length)
				}else{
					this.selectAll=false;
				}
			},
			/*确认添加*/ 
			addGoods(){
				if(this.storeInfo==""){
					common.toast("none","您还没有开店",2000)
					return;
				}
				this.postUerDistribution(this.goodsIds)
			},
			/*添加分销商品*/
			 postUerDistribution(params){
				 postUerDistribution(params).then(res=>{
					 if(res.status==1){
						 common.toast("none","添加成功",2000)
						 let that=this;
						
						 setTimeout(function () {
						    that.getDistribution(that.params)
							// that.$forceUpdate(); //重绘
							// that.goodsIds.length=0;
						 }, 2000);
						
					 }
					 console.log(res)
				 })
			 },
			 /*跳转*/ 
			 goodsDetail(e){
				let goods_id=e.currentTarget.dataset.id;
				 uni.navigateTo({
				 	url:`/pages/goods/goodsInfo/goodsInfo?goods_id=${goods_id}`
				 })
			 },
			/*切换*/ 
			changeTab(e){
				
				let order=e.currentTarget.dataset.order;
				let type=e.currentTarget.dataset.type;
				
				this.params.order_by=order;
				if(order=="shop_price"){/*价格筛选*/
					if(this.priceFlag){
						this.params.asc=true;//排序方式 //true 升序 false降序
						this.priceFlag=false;
						
					}else{
						this.params.asc=false;
						this.priceFlag=true;
					}
					
				}
				this.params.size=20;
				this.active=type;
			
				this.getDistribution(this.params)
			},
			onReachBottom(){//下拉加载数据
				console.log("滚动加载")
				if(this.goodslist.length===this.total){
					common.toast("none","加载完了",2000)
					 return;
				}
				let size=this.size;
				size+=10;
				this.params.size=size;
				
				this.getDistribution(this.params);
				
				
			},
			/*打开筛选弹框*/
			openFilterModal(){
				this.openFilter=true;
				
				
			},
			/*搜索*/ 
			searchName(e){
				
				this.params.goods_name=e.detail.value
			},
			submitSearch(){
				let params={
					goods_name:this.params.goods_name,
				}
				this.getDistribution(params)
			},
			/*重置*/ 
			restoreData(){
				this.params.cat_id="",
				this.params.brand_id="",
				this.goods_name=""
				 this.openFilter=false;
				this.getDistribution(this.params);
			},
			/*关闭筛选弹框*/ 
			closeFilterModal(){
				this.openFilter=false
			},
			/*打开全部分类*/
			categoryTap(){
				this.categoryShow=!this.categoryShow;
			},
			
			/*分类内容点击*/
			checkCategory(e){
				// console.log(e)
				let id=e.currentTarget.dataset.id;
				
				let barand={
					cat_id:id
				}
				this.getBrandInfo(barand)
				this.clickId=id;
				
			},
			/*品牌点击*/ 
			checkBrand(e){
				let id=e.currentTarget.dataset.id;
				this.params.brand_id=id;
				this.params.size=20;
				 this.openFilter=false;
				this.getDistribution(this.params)
			}
		
			
		}
	}
</script>

<style lang="scss">
/*checkbox重写样式*/
page{
   background: #f5f5f5;
}
checkbox .wx-checkbox-input{
   border-radius: 50%;
   width: 40rpx;
   height: 40rpx;
}
checkbox .wx-checkbox-input.wx-checkbox-input-checked{
   border: none;
   background: red;
   width: 44rpx;
   height: 44rpx;
}
checkbox .wx-checkbox-input.wx-checkbox-input-checked::before{
   border-radius: 50%;
   width: 40rpx;
   height: 40rpx;
   line-height: 40rpx;
   text-align: center;
   font-size:30rpx;
   color:#fff;
   background: transparent;
   transform:translate(-50%, -50%) scale(1);
   -webkit-transform:translate(-50%, -50%) scale(1);
}
/*主样式*/
.container{
     background-color: #f5f5f5;
}
.search-bar{
    width: 100%;
    box-sizing: border-box;
    padding: 10px 5% 0;
    border-top: 1px solid #f3f3f3;
}
.viewall-btn{
	    margin-top: 20rpx;
	    width: 300rpx;
	}
.search-input{
    width: 80%;
    float: left;
    border: 1rpx solid #f3f3f3;
    box-sizing: border-box;
    height: 80rpx;
    padding-left:20rpx;
    border-top-left-radius:10rpx;
    border-bottom-left-radius: 10rpx;
    font-size: 14px;
    background: #fff;
}
.search-btn{
    width: 20%;
    height: 80rpx;
    background-color: #ff3b3b;
    display: inline-block;
    text-align: center;
    border-top-right-radius:10rpx;
    border-bottom-right-radius: 10rpx;
}
.search-btn .search-img{
    height: 45rpx;
    width: 45rpx;
    padding: 20rpx;
}
.nav{
     border-bottom: 1px solid #f3f3f3;
}
.nav-item{
    float: left;
    width: 20%;
    height: 90rpx;
    line-height: 90rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28rpx;
    border-bottom: 1px solid #f3f3f3;
    background-color: #fff;
}
.nav-item .ico-filter{
    width: 20rpx;
    height: 20rpx;
    margin-left: 10rpx;
    line-height: 0;
}
.ico-dir{
    width: 16rpx;
    height: 22rpx;
    margin-left: 10rpx;  
    background-repeat: no-repeat;
    background-size: cover;
    background-position-x: 0;
}
.ico-dir-dn {
    background-position-x: -16rpx;
}
.ico-dir-up {
    background-position-x: -32rpx;
}
.disgoods-list{
    width: 100%;
    padding-bottom: 100rpx;
}
.choice_item{
    position: relative;
    width: 710rpx;
    box-sizing: border-box;
    min-height: 200rpx;
    padding: 10rpx 3%;
    font-size: 28rpx;
    border-radius: 10rpx;
    overflow: hidden;
    margin: 0 auto;
    margin-top: 20rpx;
    background: #fff;
}
.goods-check{
    float: left;
    margin-right: 10px;
    margin-top: 76rpx;
}
.img-wrap{
    float: left;
    width: 180rpx;
    height: 180rpx;
    padding:0 10rpx 10rpx;
    margin-right: 10px;
}
.img-wrap image{
    width: 100%;
    height: 100%;
}
.item-cont .title{
    height: 72rpx;
    margin: 12rpx 0;
    padding-right: 10rpx;
    line-height: 36rpx;
    color: #333;
    overflow: hidden;   
}
.price{
    display: inline-block;
    color: #999;
    padding-bottom: 20rpx;
    font-weight: bold;
}
.comment{
    color: #ff3b3b;
    font-weight: bold;
}
.distri-bot{
    width: 100%;
    height: 100rpx;
    background-color: #fff;
    position: fixed; 
    left: 0;
    bottom: 0;
}
.bot-left{ 
    width: 80%; 
    float: left;
    line-height: 100rpx;
}
.bot-left .check-all{
    margin-left: 10px;
}
.bot-left label{
    vertical-align: middle;
}
.bot-right{ 
    width: 20%; 
    float: right;
}
.bot-right button{
    background-color: #ff3b3b;
    border: none; 
    line-height: 100rpx;
    color: #fff;
    font-size: 14px;
}
/* 弹框相关 */
.filter-modal{
    position: fixed;
    left: 150rpx;
    top: 0;
	//#ifdef H5
	top: 88rpx;
	//#endif
    right: 0;
    bottom: 0;
    z-index: 20;
    background-color: white;
    overflow-x: hidden;
    padding-bottom: 30rpx;
}
.all-classification{
    margin-top: 30PX;
    line-height: 60rpx;
    overflow: hidden;
}
.allcla-btn,.allbra-btn{
    font-size: 15px;
    color: #333;
    padding: 5px 0 5px 10px;
    border-bottom: 1px solid #f3f3f3;
}
.claitem-box .cla-item,.braitem-box .bra-item{
    font-size: 14px;
    color: #666;
    border: 1px solid #f3f3f3;
    margin-left: 10px;
    display: inline-block;
    margin-top: 30rpx;
    box-shadow:0 0 10px 1px #ededed;
    line-height: 30px;
    float: left;
    padding: 0 6px;
}
.all-brand{
    line-height: 60rpx;
    overflow: hidden;
    margin-top: 10px;
}
.red{
  color: #ff3b3b;
}
</style>
